<%--
기능:
    * 일반형 게시판 게시물 상세 조회
기능 상세: 
    * 조회조건에 의해 필터링된 게시물 목록에서 링크를 눌러 상세조회 화면으로 이동한 경우에도
      다음글, 이전글은 목록에 적용된 조회조건에 적용되지 않는다. (네이버 카페 기준)
--%><%@ page contentType="text/html; charset=utf-8" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" 
%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>edit.jsp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="/jsp/common/include.base.jsp" %>
<%@ include file="/jsp/common/include.form.jsp" %>
<jsp:include page="/jsp/common/include.commoncode.jsp" flush="false"><jsp:param name="gp" value="1,2"/></jsp:include>
<style type="text/css">
    body { font-size:12px; }
    tr { height:30px; } 
    td { padding:5px; }
    input { line-height:20px; }
    #title { width:100%; }
    #content { width:100%; height:100px; }
    input, select, textarea { font-family:inherit; font-size:inherit; }
    button { font-size:11px !important; }
    
	[css-tag='span-file'] .ui-button-text { padding:0px !important; }    
</style>
<script type="text/javascript">
//*************************************************************************
// ajax 호출 부분 - 시작
//*************************************************************************
	// 상세 조회 ajax 호출 성공시 조회 데이터에 대한 처리 
	function onViewSuccess(data) {
	    setElemValue({
	            map: {
	                "ARTICLE_ID": {elem: $("#articleId")},
	                "POPUP_YN": {elemName: "popupYn"},
	                "FIX_YN": {elemName: "fixYn"},
	                "TITLE": {elem: $("#title")},
	                "CONTENT": {elem: $("#content")},
	                "PREV_ARTICLE_ID": function(data) { $("#prev").attr("href", window.location.pathname + "?articleId=" + data); },
	                "PREV_TITLE": function(data) { $("#prev").text(data); },
	                "NEXT_ARTICLE_ID": function(data) { $("#next").attr("href", window.location.pathname + "?articleId=" + data); },
	                "NEXT_TITLE": function(data) { $("#next").text(data); }
	            },
	            data: data
	    }); 
	}

    // 저장 ajax 호출시 서버로 전달될 저장데이터 반환  
    function getSaveData() {
        var data = {};
        
        data.bulletinGb = $("#bulletinGb").val();
        data.parentArticleId = $("#parentArticleId").val();
        data.articleId = $("#articleId").val();
        data.fixYn = $("[name='fixYn']:checked").val(); 
        data.popupYn = $("[name='popupYn']:checked").val(); 
        data.title = $("#title").val();
        data.content = $("#content").val();
        
        return data;
    }
	
// ajax를 통한 url 호출	
function call(type) {
	callAjax({
		urls: {
            "action.read": {
            	url: "${pageContext.request.contextPath}/app/bulletin/read.json", 
            	data: {articleId: $("#articleId").val()}, 
            	onsuccess: onViewSuccess
            },
            "action.save": {
            	url: "${pageContext.request.contextPath}/app/bulletin/save.json", 
            	data: getSaveData, 
            	showAlert: true, 
            	onsuccess: function() { _list(buttonManager.getState() == "state.new"); },
                onvalidate: function() { return $("#form").valid(); }
            },
            "action.delete": {
            	url: "${pageContext.request.contextPath}/app/bulletin/delete.json", 
            	data: {articleId: $("#articleId").val()}, 
            	showAlert: true, 
            	onsuccess: function() { _list(); }
            }
        },			
	    type: type
	});
}
//*************************************************************************
// ajax 호출 부분 - 종료
//*************************************************************************
// 버튼 구성 정보 정의부 - 시작
//*************************************************************************
    var btnDefs = {
   		// 버튼 정의, action: click 이벤트시 수행될 함수, afterState: click시 이벤트 수행시 설정될 상태
   		buttons: {
   			"btnEdit": {action:function() { setFormEditable(true); }, afterState:"state.edit"},
   			"btnReply": {
   			        action: function() { 
   			        	document.location.href = window.location.pathname + getBaseEditUrlParam() + "&parentArticleId=" + $("#articleId").val(); 
   			        }
   			},
   			"btnDelete": {action:function() { call("action.delete"); }},
   			"btnList": {action:function() { _list(); }},
   			"btnSave": {action:function() { call("action.save"); }},
   			"btnCancel": {action:function(state) { 
	   	        // 수정:상세보기로, 등록:목록의 이전 조회 페이지로, 답글:목록의 이전 조회 페이지로
   				switch (buttonManager.getState()) {
                case "state.edit":
                	document.location.href = window.location.pathname + getBaseEditUrlParam() + "&articleId=" + $("#articleId").val();
                	break;
                case "state.new":
                case "state.reply":
                	_list();
                    break;
   				}
   		    }}
   	    },
   	    // 상태에 따른 버튼 처리 및 수행 함수 선언, show: 보여질 버튼 (나머지는 숨겨짐), actionOnInit: 초기화시(setupButton 호출시) 수행될 작업
   	    states: {
            "state.view": {show:["btnEdit", "btnReply", "btnDelete", "btnList"], actionOnInit:function() { call("action.read"); }},
            "state.edit": {show:["btnSave", "btnCancel"]},
            "state.new": {show:["btnSave", "btnCancel"], actionOnInit:function() { setFormEditable(true); }},
            "state.reply": {show:["btnSave", "btnCancel"], actionOnInit:function() { setFormEditable(true); }}
   	    },
   	    // 화면 초기상태 확인 함수
   	    getInitState: function() {
            var articleId = $("#articleId").val();
            var parentArticleId = $("#parentArticleId").val();
            
            if (articleId) { 
                state = "state.view"; 
            } else 
            if (parentArticleId) {
                state = "state.reply";
            } else {
                state = "state.new"; 
            }
            
            $("#btnSet").attr("state", state);
            return state;
   	    }
    };
//*************************************************************************
// 버튼 구성 정보 정의부 - 종료
//*************************************************************************
// 초기 작업 - 시작
//*************************************************************************
$(function() {
	buttonManager.setupButton("btnSet", btnDefs);
	$("#form").validate({
	    rules: {
	    	fixYn: "required",
	    	popupYn: "required",
	    	title: {
	    		required: true,
	    		maxlength: 10
	    	},
	        content: {
	        	required: true,
	        	maxlength: 10
	        }
	    },
	    messages: {
            fixYn: "공지여부를 선택하세요",
            popupYn: "팝업여부를 선택하세요",
            title: {
            	required: "제목을 입력하세요",
            	maxlength: $.validator.format("제목은 {0}이상의 글자를 입력할 수 없습니다.")
            },
	    	content: {
	    		required: "내용을 입력하세요",
	    		maxlength: $.validator.format("내용은 {0}이상의 글자를 입력할 수 없습니다.")
	    	}
	    },
	    showErrors: function(errorMap, errorList) {
	    	if (errorList.length > 0) {
	    		var message = "";
	    		for (var i = 0; i < errorList.length; i++) {
	    			message += ((message == "" ? "" : "\n") + errorList[i].message);
	    		}
	            alert(message);
                $(errorList[0].element).focus();
	    	}
	    }
	});
	
	var files = [
        {name:"첫번째 파일.txt", newName:"dgadfaf.txt", size:1500, ext:"txt"},
        {name:"두번째 파일.jpg", newName:"dgadfaf.jpg", size:45500, ext:"jpg"},
        {name:"세번째 파일.xls", newName:"dgadfaf.xls", size:1800, ext:"xls"}
    ];
	
	fileUploader.setupUploader("attaches", files, "${pageContext.request.contextPath}/app/file/upload");
	
	$("button").button();
});
//*************************************************************************
// 초기 작업 - 종료
//*************************************************************************
// 기타 함수 - 시작
//*************************************************************************
function setFormEditable(editable) {
	$("input[type='text'][role='ui-elem'], textarea").attr("readonly", !editable);
	$("input[type='radio'][role='ui-elem']").attr("disabled", !editable);
}

	function getBaseEditUrlParam(goFirst) {
		return "?bulletinGb=" + $("#bulletinGb").val() + (goFirst ? "" : "&page=${param.page}");
	}

function _list(goFirst) {
	document.location.href = "list.jsp" + getBaseEditUrlParam(goFirst);
}
//*************************************************************************
// 기타 함수 - 종료
//*************************************************************************
</script>
</head>
<body><form id="form">
<input type="hidden" id="bulletinGb" value="${param.bulletinGb}"/>
<input type="hidden" id="parentArticleId" value="${param.parentArticleId}"/>
<div id="btnSet">
<button type="button" id="btnEdit">수정</button><button type="button" id="btnReply">답글</button><button type="button" id="btnDelete">삭제</button><button type="button" id="btnList">목록</button><button type="button" id="btnSave">저장</button><button type="button" id="btnCancel">취소</button>
</div>
<table cellspacing=0 cellpadding=0 style="width:100%;">
    <colgroup>
        <col width="100px"/>
        <col>
    </colgroup>
    <tr><td>ID
    </td><td><input type="text" readonly id="articleId" value="${param.articleId}"/>
    </td></tr>
    <tr><td>공지여부
    </td><td><input role="ui-elem" type="radio" disabled id="fixYnY" name="fixYn" value="Y"/>Y<input role="ui-elem" type="radio" disabled id="fixYnN" name="fixYn" value="N"/>N
    </td></tr>
    <tr><td>팝업여부
    </td><td><input role="ui-elem" type="radio" disabled id="popupYnY" name="popupYn" value="Y"/>Y<input role="ui-elem" type="radio" disabled id="popupYnN" name="popupYn" value="N"/>N
    </td></tr>
    <tr><td>제목
    </td><td><input role="ui-elem" type="text" readonly id="title" name="title"/>
    </td></tr>
    <tr><td>내용
    </td><td><textarea role="ui-elem" readonly id="content" name="content"></textarea>
    </td></tr>
    <tr><td>첨부파일
    </td><td><div id="attaches"></div>
    </td></tr>
    <c:if test="${param.articleId ne null}">
    <tr><td>이전글
    </td><td><a id="prev" href="#"></a>
    </td></tr>
    <tr><td>다음글
    </td><td><a id="next" href="#"></a>
    </td></tr>
    </c:if>
</table>
</form></body>
</html>